<template>
  <div class="start">
    <div>
      <p>{{ typewriter }}</p>
      <div class="test">
        <el-button
          type="success"
          class="btn"
          @click="goMain()"
          style="margin-right: 10px"
          >特色植物</el-button
        >
        <el-button type="success" class="btn" @click="go()" plain
          >植物百科</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Start",
  data () {
    return {
      typewriter: "",
      i: 0,
      timer: 0,
      // str: "Welcome to Subtropical plant resources website"
      str: "欢迎来到植物世界"
    }
  },
  mounted () {
    this.typing();
  },
  methods: {
    typing () {
      if (this.i <= this.str.length) {
        this.typewriter = this.str.slice(0, this.i++);
        this.timer = setTimeout(() => {
          this.typing();
        }, 80);
      } else {
        clearTimeout(this.timer);
      }
    },
    goMain () {
      this.$router.push('/home');
    },
    go () {
      this.$router.push('/research');
    }

  }
}
</script>

<style scoped>
.start {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/plant.jpg");

  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
.test {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
p {
  /* width: 900px; */
  font-family: FangSong;
  /* margin: 0 auto;
  padding: 30vh 30vh 0px 30vh; */

  font-size: 50px;

  font-weight: bold;
  text-align: center;
  color: #fff;
  text-shadow: 0px 1px 0 #000, 0px 2px 0 #333, 0px 3px 0 #060606,
    0px 4px 0 #020202, 0px 5px 0 #252525, 0px 6px 1px rgba(0, 0, 0, 0.5),
    0px 5px 4px rgba(0, 0, 0, 0.7), 0px 2px 6px rgba(0, 0, 0, 0.6);
}
.btn {
  /* margin-top: 50px;
  margin-left: 46%; */
  width: 120px;
  height: 50px;
  font-size: 24px;
  /* border-radius: 15px; */
}
</style>
